
import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native'
import { Heading2, Title } from '../../../widget/Text'
import { screen, system } from '../../../common'
import { color } from '../../../widget'

type Props = {
    info: Object,
    lineNumber: number,//一行显示几个
    onPress: Function,
}


class CategoryGridItem extends PureComponent<Props> {
    constructor(props) {
        super(props)
    }

    render() {
        let info = this.props.info
        let icon = info.icon
        let cateName = info.name
        // let viewWidth = screen.width / this.props.lineNumber - screen.onePixel
        // let iconWidth = screen.width / this.props.lineNumber / 2
        // width={viewWidth}
        // height={viewWidth}
        return (
            <TouchableOpacity style={styles.container}

                onPress={this.props.onPress}>
                <Image
                    style={styles.icon}
                    resizeMode={'contain'}
                    source={{ uri: icon }} />
                <Title>
                    {cateName}
                </Title>
            </TouchableOpacity>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        width: screen.width / 5 - screen.onePixel,
        height: screen.width / 5 - screen.onePixel,
        // borderBottomWidth: screen.onePixel,
        // borderRightWidth: screen.onePixel,
        borderColor: color.border
    },
    icon: {
        width: screen.width / 10,
        height: screen.width / 10,
        borderRadius: 10,
    }
})


export default CategoryGridItem
